<template>
  <tm-app>
    <tm-navbar title="我的家族" :followTheme="true" :hideHome="true">
    </tm-navbar>
    <tm-sheet :padding="[20]" :margin="[0]" color="#ffffff">
      <tm-input
        placeholder="请输入真实姓名或手机号码搜索"
        prefix="tmicon-search"
        searchLabel="搜索"
      ></tm-input>
    </tm-sheet>
    <ad unit-id="adunit-efe7783c0da9054c"></ad>
    <tm-sheet :transprent="true" :padding="[20]" :margin="[0]">
      <tm-sheet
        :margin="[0, 0, 0, 20]"
        :round="4"
        v-for="(item, index) in state.list"
        :key="index"
        _class="flex flex-row flex-row-center-start"
      >
        <view class="flex flex-col flex-col-center-center mx-n4">
          <tm-avatar
            :img="item.userHead || 'https://picsum.photos/200/300'"
            class="mr-n4"
            :size="150"
            :round="24"
          ></tm-avatar>
          <tm-text :fontSize="36" _class="mt-n4" color="#000">{{
            state.type[item.userLevel]
          }}</tm-text>
        </view>
        <view class="flex flex-col flex-col-center-start" style="color: #333">
          <tm-text _class="mb-n2">微信昵称: {{ item.userName || "-" }}</tm-text>
          <tm-text _class="mb-n2"
            >真实姓名：{{ item.userUealName || "-" }}</tm-text
          >
          <tm-text _class="mb-n2"
            >手机号码: {{ item.userUealPhone || "-" }}</tm-text
          >
          <tm-text _class="mb-n2">
            奖励比例：{{ item.showProportion }}%
          </tm-text>
          <tm-text _class="mb-n2">
            创造收益：{{ item.superConnectionIncome || 0 }}
          </tm-text>
          <tm-text _class="mb-n2">
            有效连接次数：{{ item.validConnection || 0 }}
          </tm-text>
          <!-- <tm-sheet _class="mb-n2 flex flex-row flex-row-center-start" :padding="[0]" :margin="[0]">
            <tm-text>连接收益：</tm-text>
            <tm-text :followTheme="true">点击查看</tm-text>
          </tm-sheet>
          <tm-text _class="mb-n2">有效连接次数：1</tm-text>
          <tm-text>为您创造总额: 0.18</tm-text> -->
        </view>
      </tm-sheet>
    </tm-sheet>
  </tm-app>
</template>

<script setup>
import { onMounted, reactive } from "vue";
import { getUserFamilyApi } from "@/api";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
const state = reactive({
  page: {
    pageNo: 1,
    pageSzie: 10,
    userSuperId: "",
  },
  list: [],
  total: 0,
  type: {
    HHR: "城市合伙人",
    TZ: "团长",
    TZY: "拓展员",
    SJ: "商家",
    YH: "普通用户",
  },
});
onLoad(({ id }) => {
  state.page.userSuperId = id;
  getUserList();
});
const getUserList = async () => {
  if (state.total != 0 && state.total == state.list.length) return;
  const res = await getUserFamilyApi(state.page);
  state.list.push(...res.records);
  state.total = res.total;
};
onReachBottom(() => {
  if (state.total == state.list.length) return;
  state.page.pageNo += 1;
  getUserList();
});
</script>

<style scoped></style>
